<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!-- 头部 标题-->
      <div class="table-page-search-wrapper">
        <div class="header">
          <div>Conference</div>
          <div>
            <a-button type="dashed" style="border:none;color:#1890ff;">See all</a-button>
          </div>
        </div>
      </div>

      <div class="table-operator">
        <!-- 添加 -->
        <a-button icon="plus" @click="addItem">
          New
          <a-icon type="down" />
        </a-button>

        <!-- 右侧 -->
        <span>
          <a-icon type="align-left" />
          <a-icon type="down" />
        </span>
      </div>

      <!-- 表格数据 -->
      <a-table :pagination="{'show-size-changer':true}" :columns="columns" :data-source="data" @change="onChange">
        <!-- title -->
        <template slot="tit" slot-scope="text, record, index">
          <span :style="{color:record.status == 0?'#52c41a':record.status == 2?'red':''}">{{record.tit}}</span>
        </template>

        <!-- status -->
        <template slot="status" slot-scope="status">
          <div v-if="status==0"  style="background:#F4F7CC;padding:3px 5px;" ><a-icon type="check" /> Done</div>
          <div v-else-if="status==3"  style="padding:3px 5px;"><a-icon type="arrow-right" /> In Progress</div>
          <div v-else-if="status==1" style="background:#FEF1CF;padding:3px 5px;" ><a-icon type="warning" />  In Review</div>
          <div v-else-if="status==2"  style="background:#F8D8CB;padding:3px 5px;"><a-icon type="exclamation-circle" /> Blocked</div>
        </template>

        <!-- afforts -->
        <template slot="effort" slot-scope="effort">
          <div class="effort-box">
            <a-progress
              :percent="10 * effort"
              :strokeWidth="25"
              strokeColor="#ADB4E2"
              :showInfo="false"
            />
            <div class="effort-day">{{effort}}</div>
          </div>
        </template>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
const columns = [
  {
    title: "Title",
    key: "tit",
    dataIndex: "tit",
    scopedSlots: { customRender: "tit" },
    onFilter: (value, record) => record.tit.indexOf(value) === 0,
    sorter: (a, b) => a.tit.length - b.tit.length,
    sortDirections: ["descend"],
  },
  {
    title: "Assigned To",
    dataIndex: "assignedTo",
    key: "assignedTo",
    onFilter: (value, record) => record.assignedTo.indexOf(value) === 0,
    sorter: (a, b) => a.assignedTo.length - b.assignedTo.length,
    sortDirections: ["descend"],
  },
  {
    title: "Due Date",
    dataIndex: "date",
    key: "date",
    onFilter: (value, record) => record.date.indexOf(value) === 0,
    sorter: (a, b) => a.date.length - b.date.length,
    sortDirections: ["descend"],
  },
  {
    title: "Status",
    dataIndex: "status",
    key: "status",
    scopedSlots: { customRender: "status" },
    onFilter: (value, record) => record.status.indexOf(value) === 0,
    sorter: (a, b) => a.status.length - b.status.length,
    sortDirections: ["descend"],
  },
  {
    title: "Effort(Days)",
    dataIndex: "effort",
    key: "effort",
    scopedSlots: { customRender: "effort" },
    onFilter: (value, record) => record.effort.indexOf(value) === 0,
    sorter: (a, b) => a.effort.length - b.effort.length,
    sortDirections: ["descend"],
  },
];

const data = [
  {
    key: "1",
    tit: "New York No. 1 Lake Park",
    assignedTo: "Dan Holme",
    date: "1/12/2020",
    status: 0,
    effort: 2,
  },
  {
    key: "2",
    tit: "New York No. 1 Lake Park",
    assignedTo: "Dan Holme",
    date: "1/12/2020",
    status: 1,
    effort: 10,
  },
  {
    key: "3",
    tit: "New York No. 1 Lake Park",
    assignedTo: "Dan Holme",
    date: "1/12/2020",
    status: 2,
    effort: 8,
  },
  {
    key: "4",
    tit: "New York No. 1 Lake Park",
    assignedTo: "Dan Holme",
    date: "1/12/2020",
    status: 3,
    effort: 3,
  },
  {
    key: "5",
    tit: "New York No. 1 Lake Park",
    assignedTo: "Dan Holme",
    date: "1/12/2020",
    status: 1,
    effort: 6,
  },
  {
    key: "33",
    tit: "New York No. 1 Lake Park",
    assignedTo: "Dan Holme",
    date: "1/12/2020",
    status: 2,
    effort: 8,
  },
  // {
  //   key: "43",
  //   tit: "New York No. 1 Lake Park",
  //   assignedTo: "Dan Holme",
  //   date: "1/12/2020",
  //   status: 0,
  //   effort: 1,
  // },
  // {
  //   key: "53",
  //   tit: "New York No. 1 Lake Park",
  //   assignedTo: "Dan Holme",
  //   date: "1/12/2020",
  //   status: 2,
  //   effort: 10,
  // },
];
function onChange(pagination, filters, sorter) {
  console.log("params", pagination, filters, sorter);
}

export default {
  data() {
    return {
      data,
      columns,
    };
  },
  computed: {
      
  },
  methods: {
    onChange,
    addItem() {
      let item = {
        key: String(Math.random()),
        tit: "New York No. 1 Lake Park",
        assignedTo: "Dan Holme",
        date: "1/12/2020",
        status: Math.floor(Math.random() * 3),
        effort: Math.floor(Math.random() * 9),
      };
      this.data.unshift(item);
      this.$message.success('操作成功');
    },
  },
};
</script>

<style lang="less" scoped>
.table-page-search-wrapper {
  .header {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 25px;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}
.table-operator {
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eee;
  padding: 15px 10px;
  border-bottom: 3px solid #bbb;
  color: #000;
  .ant-btn {
    background-color: #eee;
    border: none;
  }
}
.ant-alert-info {
  background-color: inherit;
  border: none;
}

/deep/.ant-progress-inner {
  overflow: initial;
  background-color: inherit;
}
/deep/.ant-progress-bg {
  border-radius: 0 !important;
}
.pd {
  padding: 3px 5px;
}
.effort-box {
  position: relative;
  .effort-day {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
  }
}
</style>
